CSS Compound Rules
H2 Examples
Compound rules in CSS enable specific styling of elements based on their hierarchical relationships or context. By targeting `h2` elements within different sections (`header`, `main`, `footer`), you can apply unique styles to each, enhancing visual hierarchy and design coherence.
h2 { font-weight: 100; font-size: 4em; }
header h2 { font-weight: 900; font-size: 4em; color: brown; font-style: italic; }
main h2 { font-weight: 100; font-size: 2em; color: darkorange; }
footer h2 { font-weight: 300; font-size: 1em; color: aliceblue; }
About Compound Rules
1Creating compound CSS rules allows for tailored styling within different sections of a webpage, such as `header`, `main`, `aside`, and `footer`. This specificity enhances the design and functionality of each section.
Span
The `<span>` tag is useful for applying specific styles within text blocks, such as paragraphs. This flexibility is crucial for individualizing parts of your content without altering the overall block structure.
Stylizing Links
Links can be styled to respond differently based on user interaction, enhancing usability and aesthetic appeal. It's important to style links in the following order: `:link`, `:visited`, `:hover`, and `:active` to ensure proper cascading of styles.
a { font-size: 0.9em; color: #A74731; text-decoration: none; font-weight: 300; }
a:visited { color: #A74731; font-weight: bold; }
a:hover { color: #F1A748; text-decoration: underline; cursor: pointer; }
a:active { color: #A74731; cursor: pointer; font-weight: bold; }
Three Different Ways to Attach CSS
A) Make a CSS style sheet sheet and attach it.
B) Put CSS in head portion of HTML code. (Inside the <style type="text/css">
Place your CSS Rules here
</style> code)
C) Place it inline <style=______>
Inline CSS provides a quick way to apply styles directly to individual elements, useful for overriding stylesheet rules for specific cases.
<p style="color: blue; font-weight: 800;">Paragraph text goes here.</p>
The Use of the Span Tag
The `<span>` tag, paired with CSS, offers granular control over the styling of specific text segments within a paragraph or other text block.
p span {
font-family: your choice here;
font-size: your choice here;
font-weight: your choice here;
color: your choice here;
}
Common and Uncommon CSS Text Properties
Common properties like `font-size`, `font-weight`, and `color` are fundamental for text styling, whereas properties like `overflow`, `text-indent`, and `text-shadow` offer additional control for advanced styling needs.
Type List Tags
List tags (`<ul>`, `<ol>`, `<li>`, `<dl>`, `<dd>`) structure content in ordered, unordered, and definition lists, essential for organizing information clearly.
A sample ordered list (numbered) could be coded as follows:
<ol>
<li> List Item 1 </li>
<li> List Item 2 </li>
<li> List Item 3 </li>
<li> List Item 4 </li>
</ol>
Important Notes on Lists
Lists serve various functions, from simple text organization to complex components like navbars. Style and functionality can be further customized with properties like `list-style-type`.
Note: you can not set <li> by themselves. All <li>s must be used inside an, <ol> or <ul> etc.